<?php 
    include('../includes/db_exe/db_connection.php');
?>

<!-- include phan header -->
<?php
    $title_page = 'Wewant';
    include('../includes/html_templates/header.php');
    $userId = 1; 
?>

<div class="container-fluid outer-static" id="outer" style="margin-top:45px;">
	<div id="inner">
        <div class="clearfix"></div>
        <div class="content-inner with-buttons show-cards">
            <div class="products-grid">
                <div class="products-thumbnails product-card-container">

                <!-- Truy van co so du lieu xuat ra cac san pham ma user follow -->
                <?php
                    $db = connectDb();
                    //lay tat ca thong tin san pham tu bang duoc join giua bang product va bang follows 
                    //dùng id_product va select ra cac dong dung id_user_to la id cua nguoi dung
                    $q = "SELECT p.id_product,p.product_name,p.product_url,p.product_price,p.image_src FROM products AS p LIMIT 8";
                   
                    $r = exeQuery($db,$q);
                    while($row = mysqli_fetch_array($r,MYSQLI_ASSOC)) { 
                    ?>
                    
                    <span>
                        <div class="product-card card-theme">
                            <div class="all-in-img-product">
                                <a href="Product Detail.html" alt="Con mèo hiệu con chuột" target="_blank" class="product-thumbnail">
                                    <div class="hoverMask"></div>
                                    <img src=<?php echo "../upload/image_product/x354-{$row['image_src']}.jpg" ?> >
                                </a>
                                <?php if($row['product_price'] >0) echo "<span class='price-tag'>{$row['product_price']} đ</span>";  ?> <!-- neu price > 0 thi hien span -->
                            </div>
                            <div class="interacted-product-info">
                                <a href="#" class="love-img-button overtext">
                                    Thích
                                </a>
                                <span class="nums-loved">214</span>                                 
                            </div>
                            <div class="product-card-tile-meta">
                                <a href="#" title="" class="title-card-link" target="_blank">
                                    <h3 class="title-product-card"><?php echo "{$row['product_name']}"; ?></h3>
                                </a>
                            </div>
                            <div class="actionCardUsers">
                                <div class="userItem">
                                    <a href="#" target="_blank">
                                        <img src="resources/images_user/user1.jpg" alt="" class="userImg" />
                                        <div class="userName">Giacatvn</div>
                                        <div class="collectionName">Áo quần bảnh bao</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </span>

                    <?php } ?>
                    <!-- ket thuc vong lap cho tung the <span> product card -->
                    <div id="loading-more-img" style="display: none"><img src="resources/images/loading_more.gif" style="text-align: center;"></div>
                <script type="text/javascript">

	            $(document).ready(function() {
				    var nextPage = 1; //total loaded record group(s)
				    var loading  = false; //to prevents multipal ajax loads
		    
			    
				    $(window).scroll(function() { //detect page scroll
				        
				        if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
				        {
				            
				            if(loading==false) //check ajax is loading
    			            {
				                loading = true; //prevent further ajax loading
				                $('#loading-more-img').show(); //show loading image
				                
				                //load data from the server using a HTTP POST request
				                $.get('ajax/myfeedTesting.php',{'nextPage': nextPage}, function(data){
				                                    
				                    $(".product-card-container").append(data); //append received data into the element

				                    //hide loading image
				                    $('#loading-more-img').hide(); //hide loading image once data is received
				                    
				                    nextPage++; //load next page
				                    loading = false; 
				                
				                }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
				                    
				                    alert(thrownError); //alert with HTTP error
				                    $('.animation_image').hide(); //hide loading image
				                    loading = false;
				                
				                });
				                
				            }
				        }
				    });
				});

				</script>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>
